<template>
	<div>
		<div v-if="plan">
			<!-- 返回 -->
			<NavBarBack></NavBarBack>
			<!-- 收获地址的详情 -->
			<div>xxx收货</div>
			<!-- 产品的基本信息 -->
			<div>产品图片，名称信息，数量等</div>
		</div>
		<div v-else>
			<!-- 弹出式的输入支付密码面板 -->
			<van-password-input
				:value="value"
				info="密码为 6 位数字"
				:focused="showKeyboard"
				@focus="showKeyboard = true"
			/>
			<!-- 数字键盘 -->
			<van-number-keyboard
				:show="showKeyboard"
				@input="onInput"
				@delete="onDelete"
				@blur="showKeyboard = false"
				style="bottom: 80px;"
			/>
			<button @click="res">返回</button>
		</div>
		<!-- 提交订单 -->
		<van-submit-bar :price="3050" button-text="提交订单" @submit="onSubmit" />
	</div>
</template>
<script>
import NavBarBack from '../../components/navBarBack'
export default {
	data() {
		return {
			plan: true,
			value: '',
			showKeyboard: true
		}
	},
	name: 'sumbitBarBox',
	methods: {
		onSubmit() {
			alert('提交订单')
			this.plan = false
		},
		onInput(key) {
			this.value = (this.value + key).slice(0, 6)
		},
		onDelete() {
			this.value = this.value.slice(0, this.value.length - 1)
		},
		res() {
			this.plan = true
		}
	},
	components: {
		NavBarBack
	}
}
</script>
<style></style>